<template>
  <div class="login-container">
    <el-row class="" justify="center">
      <el-col :span="14">
        <div class="login-head">
          <div class="container">
            <img
              class="login-left-img"
              v-if="env.VITE_RELEASE_NAME === 'fendi'"
              src="@/assets/images/logo-black-fendi.png"
              alt="login"
            />
            <img
              class="login-left-img"
              v-if="env.VITE_RELEASE_NAME === 'shangtuo'"
              src="@/assets/images/logo-black-shangtuo.png"
              alt="login"
            />
          </div>
          <div class="text">最懂会员营销的智能收银系统</div>
        </div>
      </el-col>
    </el-row>
    <el-row class="login-main" justify="center" align="middle">
      <el-col :span="14">
        <el-row :gutter="80">
          <el-col :span="12">
            <div class="img-bx">
              <img
                class="introduce-image"
                v-if="env.VITE_RELEASE_NAME === 'fendi'"
                src="@/assets/images/login-bg-fendi.png"
                alt="login-bg"
              />
              <img
                style="width: 38rem; height: 22rem"
                class="introduce-image"
                v-if="env.VITE_RELEASE_NAME === 'shangtuo'"
                src="@/assets/images/图文.png"
                alt="login-bg"
              />
            </div>
          </el-col>
          <el-col :span="12">
            <div class="login-box">
              <div class="tabs">
                <div class="tabs-item" :class="selectedTab === 0 ? 'active' : ''" @click="selectTab(0)">账号登录</div>
                <div class="tabs-item" :class="selectedTab === 1 ? 'active' : ''" @click="selectTab(1)">验证码登录</div>
              </div>
              <div class="login-form">
                <div v-if="selectedTab === 1"><LoginFormCode /></div>
                <div v-if="selectedTab === 0"><LoginForm :animation="animation" /></div>
              </div>

              <div class="mt20 flx-row-reverse">
                <el-text v-if="env.VITE_RELEASE_NAME !== 'fendi'" class="pointer ml20" @click="goReg">没有账号? 立即注册</el-text>
                <div><Download /></div>
              </div>

              <div class="protocol mt20 flx-default fsize14 pointer" v-if="env.VITE_RELEASE_NAME == 'fendi'">
                <i
                  class="icon"
                  :class="animation ? 'iconfont icon-gouxuan color-sel' : 'iconfont icon-weigouxuan'"
                  @click="animation = !animation"
                ></i>
                <text @click="animation = !animation">我已阅读并且同意</text>
                <a class="color-sel" href="https://web.fendi.net.cn/xy/ysxy.html" target="_blank">《用户隐私协议》</a>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts" name="login">
import { ref } from "vue";
import LoginForm from "./components/LoginForm.vue";
import LoginFormCode from "./components/LoginFormCode.vue";
import { useRouter } from "vue-router";
import { REGISTER_URL } from "@/config";
import Download from "@/layouts/components/Header/components/Download.vue";

const router = useRouter();
const selectedTab = ref(0); // 默认选中第一个 tab
const env = ref(import.meta.env);
const animation = ref(true);

const goReg = () => {
  router.push(REGISTER_URL);
};

const selectTab = (index: number) => {
  selectedTab.value = index; // 切换选中的 tab
};
</script>

<style scoped lang="scss">
@import "./login.scss";
</style>
